<template>
  <div
    :id="'chartMain' + chartId"
    v-loading="isVisualVappShowLoadingProgress && isLoading"
    class="chartMain multi-single-icon"
    :class="`${componentStyle} ${componentStyle}-Style`"
  >
    <Tooltip ref="Tooltip" :componentStyle="componentStyle" />
    <AdvancedLinkageToolbar :wid="widgetInstanceId" :config="config" />
    <ComponentTitle :property="config.config.property" :titleTextStyle="getCssStyle('title')" />
    <div v-show="!isNoData && !isDataAbnormal" :class="`displayBox`" :style="{ ...getCssStyle('grid'), ...boxStyle }">
      <div :class="`displayBox-main ${displayBoxType} ${adjustClass} ${selectedStatus ? 'has_selectedStatus' : ''}`">
        <div
          v-for="(item, index) in multiData"
          :key="index"
          :class="`multi-single-icon-contentBox${chartId} multi-single-icon-contentBox`"
          :style="{ ...itemStyle }"
          @click.stop="emitAllMessages(item, index)"
        >
          <template v-if="iconShow">
            <div
              v-if="item.visible"
              v-visual-tooltip="getTooltip(item)"
              :class="getItemClass(index)"
              :style="getItemStyle(index)"
              @mouseenter="getItemStyleEnter(index)"
              @mouseleave="getItemStyleLeave(index)"
            >
              <div class="contentData" :class="`${componentUnitClass}`">
                <div v-if="!iconChange" class="img" :style="{ ...style.img, ...iconStyle }">
                  <Icon v-if="haveIcon(item.icon)" :conf="item.icon" />
                  <el-image v-else :src="getImg(item, index)" :style="style.elImage">
                    <template #placeholder>
                      <div class="image-slot">
                        {{ $demoi18n('message.loading') }}
                        <span class="dot">...</span>
                      </div>
                    </template>
                    <template #error>
                      <div></div>
                    </template>
                  </el-image>
                </div>
                <div v-if="extraRightOfName || extraRightOfValue" class="contentData-detail">
                  <!-- 附加值在name或者value右侧布局 -->
                  <div class="contentName" :title="item.alias ? item.alias : item.name">
                    <span class="name" :style="{ ...style[componentStyle].name, ...getCssStyle('name'), ...nameStyle }">
                      {{ item.alias ? item.alias : item.name }}
                    </span>
                    <div
                      v-if="extraRightOfName"
                      class="extraName"
                      :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                      :title="item.extra"
                      :style="{
                        ...style[componentStyle].extra,
                        ...getCssStyle('extra'),
                        ...extraStyle,
                        ...item.valueAdded.style,
                      }"
                    >
                      <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                      <span class="name">
                        {{ item.extra }}
                      </span>
                    </div>
                  </div>
                  <div class="text" :style="{ ...style.text, ...style[componentStyle].value }">
                    <span
                      class="value"
                      :title="item.value"
                      :style="{
                        ...(item.style ? item.style.value : style[componentStyle].value),
                        ...multiValStyle(item),
                        ...valueStyle,
                      }"
                    >
                      {{ item.value }}
                    </span>
                    <span
                      class="unit"
                      :style="{
                        ...(item.style ? item.style.unit : style[componentStyle].unit),
                        ...getCssStyle('unit'),
                        ...multiValStyle(item, 'unit'),
                        ...unitStyle,
                      }"
                    >
                      {{ item.unit }}
                    </span>
                    <div
                      v-if="extraRightOfValue"
                      class="extraName"
                      :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                      :title="item.extra"
                      :style="{
                        ...style[componentStyle].extra,
                        ...getCssStyle('extra'),
                        ...extraStyle,
                        ...item.valueAdded.style,
                      }"
                    >
                      <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                      <span class="name">
                        {{ item.extra }}
                      </span>
                    </div>
                  </div>
                </div>
                <div v-else class="contentData-detail">
                  <div v-if="iconChange" class="img" :style="{ ...style.img, ...iconStyle }">
                    <Icon v-if="haveIcon(item.icon)" :conf="item.icon" />
                    <el-image v-else :src="getImg(item, index)" :style="style.elImage">
                      <template #placeholder>
                        <div class="image-slot">
                          {{ $demoi18n('message.loading') }}
                          <span class="dot">...</span>
                        </div>
                      </template>
                      <template #error>
                        <div></div>
                      </template>
                    </el-image>
                  </div>
                  <div class="text" :style="{ ...style.text, ...style[componentStyle].value, ...valueAline }">
                    <span
                      class="value"
                      :title="item.value"
                      :style="{
                        ...(item.style ? item.style.value : style[componentStyle].value),
                        ...multiValStyle(item),
                        ...valueStyle,
                      }"
                    >
                      {{ item.value }}
                    </span>
                    <span
                      class="unit"
                      :style="{
                        ...(item.style ? item.style.unit : style[componentStyle].unit),
                        ...getCssStyle('unit'),
                        ...multiValStyle(item, 'unit'),
                        ...unitStyle,
                      }"
                    >
                      {{ item.unit }}
                    </span>
                  </div>
                  <div
                    v-if="hasExtraVal"
                    class="contentName extraName"
                    :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                    :title="item.extra"
                    :style="{
                      ...style[componentStyle].extra,
                      ...getCssStyle('extra'),
                      ...extraStyle,
                      ...item.valueAdded.style,
                    }"
                  >
                    <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                    <span class="name">
                      {{ item.extra }}
                    </span>
                  </div>
                  <div class="contentName" :title="item.alias ? item.alias : item.name">
                    <span class="name" :style="{ ...style[componentStyle].name, ...getCssStyle('name'), ...nameStyle }">
                      {{ item.alias ? item.alias : item.name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="!iconShow">
            <div
              v-show="item.visible"
              v-visual-tooltip="getTooltip(item)"
              :class="getItemClass(index)"
              :style="getItemStyle(index)"
              @mouseenter="getItemStyleEnter(index)"
              @mouseleave="getItemStyleLeave(index)"
            >
              <div class="contentData" :class="`${componentUnitClass}`">
                <div v-if="extraRightOfName || extraRightOfValue" class="contentData-detail">
                  <!-- 附加值在name或者value右侧布局 -->
                  <div class="contentName" :title="item.alias ? item.alias : item.name">
                    <span class="name" :style="{ ...style[componentStyle].name, ...getCssStyle('name'), ...nameStyle }">
                      {{ item.alias ? item.alias : item.name }}
                    </span>
                    <div
                      v-if="extraRightOfName"
                      class="contentName extraName"
                      :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                      :title="item.extra"
                      :style="{
                        ...style[componentStyle].extra,
                        ...getCssStyle('extra'),
                        ...extraStyle,
                        ...item.valueAdded.style,
                      }"
                    >
                      <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                      <span class="name">
                        {{ item.extra }}
                      </span>
                    </div>
                  </div>
                  <div class="text" :style="{ ...style.text }">
                    <span
                      class="value"
                      :title="item.value"
                      :style="{
                        ...(item.style ? item.style.value : style[componentStyle].value),
                        ...multiValStyle(item),
                        ...valueStyle,
                      }"
                    >
                      {{ item.value }}
                    </span>
                    <span
                      class="unit"
                      :style="{
                        ...(item.style ? item.style.unit : style[componentStyle].unit),
                        ...getCssStyle('unit'),
                        ...multiValStyle(item, 'unit'),
                        ...unitStyle,
                      }"
                    >
                      {{ item.unit }}
                    </span>
                    <div
                      v-if="extraRightOfValue"
                      class="contentName extraName"
                      :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                      :title="item.extra"
                      :style="{
                        ...style[componentStyle].extra,
                        ...getCssStyle('extra'),
                        ...extraStyle,
                        ...item.valueAdded.style,
                      }"
                    >
                      <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                      <span class="name">
                        {{ item.extra }}
                      </span>
                    </div>
                  </div>
                </div>
                <div v-else class="contentData-detail">
                  <div class="text" :style="{ ...style.text, ...valueAline }">
                    <span
                      class="value"
                      :title="item.value"
                      :style="{
                        ...(item.style ? item.style.value : style[componentStyle].value),
                        ...multiValStyle(item),
                        ...valueStyle,
                      }"
                    >
                      {{ item.value }}
                    </span>
                    <span
                      class="unit"
                      :style="{
                        ...(item.style ? item.style.unit : style[componentStyle].unit),
                        ...getCssStyle('unit'),
                        ...multiValStyle(item, 'unit'),
                        ...unitStyle,
                      }"
                    >
                      {{ item.unit }}
                    </span>
                  </div>
                  <div
                    v-if="hasExtraVal"
                    class="contentName extraName"
                    :class="{ 'extraNameIcon': haveIcon(item.valueAdded.icon) }"
                    :title="item.extra"
                    :style="{
                      ...style[componentStyle].extra,
                      ...getCssStyle('extra'),
                      ...extraStyle,
                      ...item.valueAdded.style,
                    }"
                  >
                    <Icon v-if="haveIcon(item.valueAdded.icon)" class="extraIcon" :conf="item.valueAdded.icon" />
                    <span class="name">
                      {{ item.extra }}
                    </span>
                  </div>
                  <div class="contentName" :title="item.alias ? item.alias : item.name">
                    <span class="name" :style="{ ...style[componentStyle].name, ...getCssStyle('name'), ...nameStyle }">
                      {{ item.alias ? item.alias : item.name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <NoData
      :isNoData="isNoData"
      :boxBgColor="boxStyle"
      :noDataPromptType="config.config.property.noDataPromptType"
      :noDataPrompt="config.config.property.noDataPrompt"
    />
    <AbnormalData :isDataAbnormal="isDataAbnormal" :boxBgColor="boxBgColor" :abnormalType="abnormalType" />
  </div>
</template>
<script>
import AdvancedLinkageToolbar from '@/components/common/advanced-linkage/advanced-linkage-toolbar.vue';
import Icon from '@/components/common/icon/icon.vue';
import EventBus from '@/event-bus/EventBus.js';
import chartBase from '@/mixin/chart-base.js';
import componentValueBase from '@/mixin/component-value-base.js';
import iconChartBase from '@/mixin/icon-chart-base.js';
import { convertValue, getThemeColors, jump } from '@/utils/util.js';
import { mapState } from 'vuex';
import ComponentTitle from '../common/component-title/component-title.vue';
import Tooltip from '../common/tooltip/tooltip.vue';
import NoData from '../common/no-data/no-data.vue';
import AbnormalData from '../common/abnormal-data/abnormal-data.vue';
import colorGroup from './config/colorGroup';
import config from './config/config';
import dfCssStyle from './config/cssStyle-default.js';
import { nextTick } from 'vue';
import { EMIT_PARAMS_OBJ } from '@/utils/constant';
import commonFn from './commonFn/index.js';

const dfStyle = {
  light: {
    box: { backgroundColor: '#FFF', borderTop: '' },
    back: { backgroundColor: '#F5FAFF' },
    value: {},
    unit: {},
    name: {},
    title: {},
    extra: {},
  },
  dark: {
    box: { backgroundColor: '#0D263A', borderTop: '' },
    back: { backgroundColor: '#122E45' },
    value: {},
    unit: {},
    name: {},
    title: {},
    extra: {},
  },
  real: {
    box: { backgroundColor: '#0D263A', borderTop: '' },
    back: { backgroundColor: '#122E45' },
    value: {},
    unit: {},
    name: {},
    title: {},
    extra: {},
  },
  displayBox: {},
  img: {},
  elImage: {},
  text: {},
  contentName: {},
};

export default {
  name: 'MultiValue',
  components: { ComponentTitle, Tooltip, Icon, AdvancedLinkageToolbar, NoData, AbnormalData },
  mixins: [chartBase, iconChartBase, componentValueBase, commonFn],
  inject: {
    containerWid: {

      // xvue容器widgetInstanceId
      default: '',
    },
  },
  props: ['pareentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'w', 'h'],
  data() {
    const _config = JSON.parse(JSON.stringify(config));
    delete _config.config.property.pageId;
    return {
      ..._config.config.property,
      isIcon: true,
      selectedIndex: -1,
      lastSendEvtIndex: -1,
      isLoading: false,
      isNoData: false,
      orgConfig: [],
      chartId: '',
      config: null,
      title: '',
      configData: [],
      showData: [],
      multiData: [],
      isThreshold: false,
      threshold: [],
      count: 0,
      isDynamicAdapt: false,
      style: JSON.parse(JSON.stringify(dfStyle)),
      componentStyle: window._adoPremise.uc.theme,
      colorGroup: colorGroup,
      titleHeight: 0,
      imgSize: 60,
      itemStyle: {},
      nameStyle: {},
      valueStyle: {},
      unitStyle: {},
      extraStyle: {},
      iconStyle: {},
      typeSetting: null,
      dfCssStyle,
      calcing: true,
    };
  },
  computed: {
    ...mapState({
      resizeCount: state => state.VisualComponentsModule.resizeCount,
    }),
    boxStyle() {
      if (!this.typeSetting) {
        return {};
      }
      return this.boxBgColor;
    },
    hasExtraVal() {
      return this.config.config.data.tableData[3].mapping;
    },
    iconChange() {
      if (!this.typeSetting) {
        return false;
      }
      const extraVal = this.config.config.data.tableData[3].mapping;
      const { componentType } = this.typeSetting;

      // 图片icon在name&value之间的布局方式
      return (
        (!extraVal && String(componentType) === '4') ||
        (extraVal && (String(componentType) === '6' || String(componentType) === '7'))
      );
    },
    iconShow() {
      if (!this.typeSetting) {
        return true;
      }

      // 兼容旧数据
      return ['withIcon', this.$demoi18n('panel.option.withIcon')].includes(this.typeSetting.showIcon);
    },
    componentUnitClass() {
      if (!this.typeSetting) {
        return '';
      }
      const extraVal = this.config.config.data.tableData[3].mapping;
      const { tableData } = this.config.config.data;
      let str = '';
      const { componentType } = this.typeSetting;
      const multiVal = tableData[3].mapping ? 'multiVal' : 'singleVal';
      const iconkey = this.iconShow ? 'WithIcon' : 'WithoutIcon';
      str = `${multiVal}${iconkey}Unit-${componentType}`;
      return str;
    },
    valueAline() {
      const obj = {};
      const alineConfig = {
        left: 'flex-start',
        center: 'center',
        right: 'flex-end',
        top: 'flex-start',
        middle: 'center',
        bottom: 'baseline',
      };
      obj.display = 'flex';
      obj.justifyContent = alineConfig[this.getCssStyle('value').textAlign];
      obj.alignItems = alineConfig[this.getCssStyle('valueUnitAlign').vertical];
      return obj;
    },
    displayBoxType() {
      let str = '';
      if (!this.typeSetting) {
        return str;
      }
      let diretion = '';
      if (this.typeSetting.alineStyle !== 'rect') {
        str = `displayBox-${this.typeSetting.alineStyle}`;
      } else {
        diretion = this.typeSetting.sortType === 'Z' ? 'row' : 'column';
        str = `displayBox-${this.typeSetting.alineStyle}-${diretion}`;
      }
      return str;
    },
    selectedStatus() {
      return this.config.config.property.selectedStatusSetting.show;
    },

    // 附加值在name右侧
    extraRightOfName() {
      if (!this.typeSetting) {
        return false;
      }
      const extraVal = this.config.config.data.tableData[3].mapping;
      const { componentType } = this.typeSetting;

      const withIconFlag = extraVal && this.iconShow && String(componentType) === '8';
      const withoutIconFlag = extraVal && !this.iconShow && String(componentType) === '3';
      return withIconFlag || withoutIconFlag;
    },

    // 附加值在value右侧
    extraRightOfValue() {
      if (!this.typeSetting) {
        return false;
      }
      const extraVal = this.config.config.data.tableData[3].mapping;
      const { componentType } = this.typeSetting;

      const withIconFlag = extraVal && this.iconShow && String(componentType) === '9';
      const withoutIconFlag =
        extraVal && !this.iconShow && (String(componentType) === '4' || String(componentType) === '5');
      return withIconFlag || withoutIconFlag;
    },
  },
  watch: {
    showData() {
      this.convertMultiData();
    },
    resizeCount() {
      // 切换分辨率时，内部子项间距不变化，需要重新渲染
      clearTimeout(this.timers.loadWidgetTimer);
      this.timers.loadWidgetTimer = setTimeout(() => {
        this.loadWidget();
      }, 200);
    },
  },
  created() {
    this.orgConfig = config;
    this.config = JSON.parse(JSON.stringify(this.orgConfig));
    this.chartId = `${this.widgetInstanceId}_01`;
  },

  mounted() {
    if (window.isLocalEnv) {
      this.loadWidget();
    }
    nextTick(() => {
      this.convertMultiData();
      this.initStyle();
    });
    EventBus.$on('widget-container-size-restored', this.onParentContainerResize);
  },
  unmounted() {
    EventBus.$off('widget-container-size-restored');
  },
  methods: {

    // xvue容器组件展开收起监听
    onParentContainerResize(containerWid) {
      if (this.containerWid && containerWid === this.containerWid) {
        this.calcUnitRect();
      }
    },

    // 接收xvue发来的实时数据
    handleRealTimeCommunication(realTimeData) {
      const { datalist } = realTimeData || {};
      if (!datalist || datalist.length === 0 || !datalist[0]['data'] || datalist[0]['data'].length === 0) {
        this.isNoData = true;
        return;
      }
      const result = datalist[0]['data'];
      this.sendDataToConfig(result);
      this.isNoData = false;
      if (!this.isNoData) {
        this.handleMultiValueResult(result, this.isIcon);
      }
    },
    initStyle() {
      this.style = JSON.parse(JSON.stringify(dfStyle));
      this.getTextWidth();
      this.getValueWidth();
      this.getExtraWidth();

      this.clearMarginFn(); // 清空所有边距
      this.setMarginFn('nameStyle');
      this.setMarginFn('valueStyle');
      this.setMarginFn('extraStyle');
      this.setMarginFn('iconStyle');
      this.setMarginExtra();

      const style = {};
      if (this.valueStyle.marginTop) {
        style.marginTop = this.valueStyle.marginTop;
      }
      this.unitStyle = style;
    },

    getTextWidth() {
      if (!this.typeSetting) {
        return;
      }
      const obj = {};
      if (String(this.typeSetting.componentType) === '1' && this.typeSetting.showIcon === 'withoutIcon') {
        obj.width = `${convertValue(this.typeSetting.textWidth)}px`;
      }
      this.style[this.componentStyle].name = Object.assign(this.style[this.componentStyle].name, obj);
    },
    getValueWidth() {
      if (!this.typeSetting) {
        return;
      }
      const obj = {};
      if (String(this.typeSetting.componentType) === '1' && this.typeSetting.showIcon === 'withoutIcon') {
        obj.width = `${convertValue(this.typeSetting.valueWidth)}px`;
      }
      this.style[this.componentStyle].value = Object.assign(this.style[this.componentStyle].value, obj);
    },
    getExtraWidth() {
      if (!this.typeSetting) {
        return;
      }
      const obj = {};
      const { tableData } = this.config.config.data;
      if (
        String(this.typeSetting.componentType) === '1' &&
        this.typeSetting.showIcon === 'withoutIcon' &&
        tableData[3].mapping
      ) {
        obj.width = `${convertValue(this.typeSetting.extraWidth)}px`;
      }
      this.style[this.componentStyle].extra = Object.assign(this.style[this.componentStyle].extra, obj);
    },

    clearMarginFn() {
      this.nameStyle = {};
      this.valueStyle = {};
      this.extraStyle = {};
      this.iconStyle = {};
    },
    setMarginFn(str) {
      if (!this.typeSetting) {
        return;
      }
      const key = Object.keys(this.typeSetting[str])[0];
      this[str][key] = `${convertValue(this.typeSetting[str][key])}px`;
    },

    setMarginExtra() {
      // 如果附件值在name或者value右侧，附加值的上下边距和name和value一致, 除了无图标左中右结构
      if (this.extraRightOfName) {
        const key = Object.keys(this.typeSetting['nameStyle'])[0];
        if (key === 'marginTop' || key === 'marginBottom') {
          this.extraStyle[key] = `${convertValue(this.typeSetting['nameStyle'][key])}px`;
        }
      }
      const { componentType } = this.typeSetting || {};
      if (this.extraRightOfValue && String(componentType) !== '5') {
        const key = Object.keys(this.typeSetting['valueStyle'])[0];
        if (key === 'marginTop' || key === 'marginBottom') {
          this.extraStyle[key] = `${convertValue(this.typeSetting['valueStyle'][key])}px`;
        }
      }
    },

    /**
     * 计算容器的最小宽高 实现自适应
     */
    async calcUnitRect() {
      if (!this.$el.offsetHeight || !this.$el.offsetWidth) {
        return;
      }
      this.calcing = true;
      const _typeSetting = this.getTypeSetting();
      const compnt = document.getElementById(`chartMain${this.chartId}`);
      if (compnt) {
        const contentBox = compnt.getElementsByClassName('displayBox-main')[0];
        const arrW = [];
        const arrH = [];
        contentBox.style = {};
        contentBox.style.minWidth = 'auto';
        contentBox.style.minHeight = 'auto';

        const units = compnt.getElementsByClassName('multi-single-icon-contentBox');
        for (let i = 0; i < units.length; i++) {
          units[i].style = {};
          units[i].style.minWidth = 'auto';
          units[i].style.minHeight = 'auto';

          const contentData = units[i].getElementsByClassName('contentData')[0];
          if (contentData) {
            contentData.style = {};
            contentData.style.width = 'auto';
            contentData.style.height = 'auto';
          }
        }

        // 是否单元格等宽
        const isEqualW = _typeSetting.widthStyle === 'equal_width' || _typeSetting.alineStyle === 'column';

        for (let i = 0; i < units.length; i++) {
          const contentData = units[i].getElementsByClassName('contentData')[0];
          if (contentData) {
            arrW.push(contentData.offsetWidth + 1);
            arrH.push(contentData.offsetHeight);
          }
        }
        arrW.sort((a, b) => b - a);
        arrH.sort((a, b) => b - a);
        for (let i = 0; i < units.length; i++) {
          const contentData = units[i].getElementsByClassName('contentData')[0];
          if (contentData) {
            if (isEqualW) {
              contentData.style.width = `${arrW[0]}px`;
            }
            contentData.style.height = `${arrH[0]}px`;
          }
        }

        if (_typeSetting.alineStyle === 'column') {
          contentBox.style.minHeight = `${this.showData.length * arrH[0]}px`;
          contentBox.style.minWidth = `${arrW[0]}px`;
        } else if (_typeSetting.alineStyle === 'row') {
          contentBox.style.minHeight = `${arrH[0]}px`;
          contentBox.style.minWidth = `${arrW[0] * this.showData.length}px`;
        } else {
          // 'rect'
          if (_typeSetting.sortType === 'Z') {
            for (let i = 0; i < units.length; i++) {
              units[i].style.minWidth = `${arrW[0]}px`;
              units[i].style.maxWidth = `${100 / _typeSetting.gridCount.Z}%`;
              units[i].style.flex = `${100 / _typeSetting.gridCount.Z}%`;
            }
            contentBox.style.minWidth = `${arrW[0] * _typeSetting.gridCount.Z}px`;
            contentBox.style.minHeight = `${Math.ceil(this.showData.length / _typeSetting.gridCount.Z) * arrH[0]}px`;
          } else {
            // N
            for (let i = 0; i < units.length; i++) {
              units[i].style.minWidth = `${arrW[0]}px`;
              units[i].style.height = `${100 / _typeSetting.gridCount.N}%`;
            }
            contentBox.style.minHeight = `${_typeSetting.gridCount.N * arrH[0]}px`;
            contentBox.style.minWidth = `${Math.ceil(this.showData.length / _typeSetting.gridCount.N) * arrW[0]}px`;
          }
        }

        this.calcing = false;

        this.renderBackground();
        this.getSplitLine(units, _typeSetting);
      }
    },
    renderBackground() {
      const compnt = document.getElementById(`chartMain${this.chartId}`);
      const containers = compnt.getElementsByClassName('content-container');
      if (containers.length === 0) {
        return;
      }
      const {
        isGradient,
        gradientDirection,
        contentBackgroundColor,
        contentGradientColor,
      } = this.config.config.property;
      const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.getCssStyle('content');
      for (let i = 0; i < containers.length; i++) {
        let background = '';
        if (isGradient) {
          const direction = gradientDirection === 'vertical' ? '180deg' : '90deg';
          const colors = getThemeColors(contentGradientColor, this.colorGroup[this.componentStyle]);
          background = `linear-gradient(${direction}, ${colors.join()})`;
        } else {
          background = contentBackgroundColor;
        }
        containers[i].style.background = background;
        containers[i].style.padding = `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft} `;
      }
    },
    convertMultiData() {
      const _typeSetting = this.getTypeSetting();
      const obj = {
        visible: false,
        name: '',
        value: '',
        unit: '',
        style: '',
        extra: '',
      };
      const ret = [];
      this.showData.map(item => {
        item.visible = true;
        ret.push(item);
      });

      // 换行模式下添加空元素实现flex的均匀布局，类似左浮动效果
      if (_typeSetting.alineStyle === 'rect') {
        const diretion = _typeSetting.sortType === 'Z' ? 'row' : 'column';
        const n = diretion === 'row' ? _typeSetting.gridCount.Z : _typeSetting.gridCount.N;
        const emptyCount = n - (this.showData.length % n);
        if (String(emptyCount) !== String(n) && this.showData.length > n) {
          for (let i = 0; i < emptyCount; i++) {
            ret.push(obj);
          }
        }
      }
      this.multiData = ret;
      nextTick(() => {
        this.calcUnitRect();
        this.defaultSelectedFirst();
      });
      this.getValueAddedThreshold();
    },
    emitAllMessages(item, index) {
      const selectedStatus = this.config.config.property.selectedStatusSetting.show;
      if (selectedStatus && this.selectedIndex !== index) {
        this.selectedIndex = index;
      }

      this.clickGetItemStyle();

      const mappingObj = {
        s: 'name',
        y: 'value',
        unit: 'unit',
        y1: 'extra',
      };
      this.sendAllMessages(item, index, mappingObj);
      this.sendAdvancedLinkagge({
        s: item.name,
        y: item.orgValue,
        unit: item.unit,
        y1: item.extra,
      });
      this.toJumpURL();
    },
    sendAllMessages(item, index, mappingObj) {
      const { sameEvtResend } = window?.CustomerDiy || {};
      if (sameEvtResend !== undefined && sameEvtResend === false) {
        if (this.lastSendEvtIndex === index) {
          return;
        } else {
          this.lastSendEvtIndex = index;
        }
      }

      // 根据映射字段，给原始field赋值
      for (const key in mappingObj) {
        if (Object.hasOwnProperty.call(mappingObj, key)) {
          const value = mappingObj[key];
          item[key] = item[value];
        }
      }
      this.executeAction('', item);
      const evtKey = this.orgConfig.events[0].key;
      const outObj = { key: '' };
      const keys = [];
      const parameters = {};
      this.config.events[0].parameters.forEach(p => {
        if (!p.key.includes(EMIT_PARAMS_OBJ)) {
          keys.push(p.key);
          let { value } = p;
          const match = p.value.match(/^\{(.*)\}$/); // 字段变量 {y1}
          if (match) {
            value = item[match[1]];
          }
          parameters[p.key] = value;
        }
      });

      outObj[EMIT_PARAMS_OBJ] = {
        eventKey: this.config.events[0].key,
        type: 'terms',
        keys,
        parameters,
        widgetInstanceId: this.widgetInstanceId,
        componentName: this.config.propertyPannelName,
        sendTime: new Date().getTime(),
      };
      this.vsEmit(evtKey, outObj);
    },
    toJumpURL() {
      this.$refs.Tooltip.hideTip(true);
      const { jumpUrl } = this.config.config.property;
      const { isOpenNewPage } = this.config.config.property;
      if (jumpUrl) {
        // 兼容没该属性的情况，默认打开新页面
        if (typeof isOpenNewPage === 'undefined' || isOpenNewPage) {
          jump(jumpUrl);
        } else {
          jump(jumpUrl, false, this);
        }
      }
    },
    getImg(item, index, img = 'content') {
      const imgNum = 2;
      const localImg = new URL(`../common/images/${img}_${this.componentStyle}_${index % imgNum}.png`, import.meta.url)
        .href;

      // 本地无法访问远程图片，用本地图片展示
      if (window.isLocalEnv) {
        return localImg;
      }

      if (item.threImgUrl) {
        return item.threImgUrl;
      } else if (item.imgUrl) {
        return item.imgUrl;
      } else {
        return localImg;
      }
    },

    // 初始加载时 以及 编排面更改配置时 触发
    loadWidget(pageStatus) {
      // 初始化this.config后，处理config.events，兼容老的普通事件
      this.convertEvents();
      this.calcing = true;
      this.pageStatus = pageStatus;
      this._updateConfigProperty();
      this.updateComponentByResolution();
      this.updateConfigData();

      if (window.isLocalEnv || this.emitComponentStatus) {
        this.updateParams(pageStatus);

        // 实时通讯组件不主动请求数据
        if (!this.isRealTime) {
          this.debounceGetData();
        }
      }
      this.typeSetting = this.getTypeSetting();
      this.initStyle();
      this.afterLoadWidget();
    },

    // 根据分辨率来更新组件
    updateComponentByResolution() {
      nextTick(() => {
        this.initStyle();
        this.style.img.lineHeight = `${convertValue(this.imgSize)}px`;
        this.style.elImage.width = `${convertValue(this.imgSize)}px`;
        this.style.elImage.height = `${convertValue(this.imgSize)}px`;
        this.style = JSON.parse(JSON.stringify(this.style));
        setTimeout(() => {
          const title = document.querySelector(`#chartMain${this.chartId} .component-title`);
          this.titleHeight = title ? title.offsetHeight : 0;
        }, 10);
      });
    },
    _updateConfigProperty() {
      this.updateConfigProperty();
      const {
        data,
        isThreshold,
        threshold,
        title,
        componentStyle,
        isDynamicAdapt,
        imgSize = 60,
        multiSortBy = 'name',
      } = this.config.config.property;
      this.componentStyle = componentStyle;
      this.configData = JSON.parse(JSON.stringify(data));
      this.isThreshold = isThreshold;
      this.threshold = threshold;
      this.count = data.length;
      this.isDynamicAdapt = isDynamicAdapt;
      this.imgSize = imgSize;
      this.multiSortBy = multiSortBy;

      // 该方法在icon-chart-base.js里
      this.updateImgUrlMultiValue(this.configData);
    },
    getTooltip(item) {
      return {
        config: this.config.config.property.tooltip || {},
        vars: {
          s: item.name,
          y: item.value,
          unit: item.unit,
          y1: item.extra,
        },
        params: this.params,
        parentComp: this,
      };
    },

    // 获取单个卡片class
    getItemClass() {
      const objClass = {
        'content-container': true,
      };
      return objClass;
    },

    // 线上点击卡片,dom中的:style="getItemStyle()"不触发，手动调用触发
    clickGetItemStyle() {
      if (this.multiData && this.multiData.length) {
        for (let index = 0; index < this.multiData.length; index++) {
          this.getItemStyle(index);
        }
      }
    },

    // 获取单个卡片样式
    getItemStyle(index) {
      const compnt = document.getElementById(`chartMain${this.chartId}`);
      const containers = compnt.getElementsByClassName('content-container');
      if (!containers.length || !containers[index]) {
        return;
      }

      const { fillColor, border, borderColor, borderSize } = this.config.config.property.selectedStatusSetting;
      if (this.selectedStatus && this.selectedIndex === index) {
        const bdStyle = `${borderSize}px solid ${borderColor}`;
        containers[index].style.background = fillColor;
        containers[index].style[border] = bdStyle;
      } else {
        containers[index].style.background = this.getItemDefaultBackground();
        containers[index].style[border] = '';
      }
    },

    // 鼠标悬浮
    getItemStyleEnter(index) {
      const compnt = document.getElementById(`chartMain${this.chartId}`);
      const containers = compnt.getElementsByClassName('content-container');
      const { fillColor } = this.config.config.property.selectedStatusSetting;
      if (!this.selectedStatus || !containers.length || !containers[index]) {
        return;
      }
      containers[index].style['background'] = fillColor;
    },

    // 鼠标移走
    getItemStyleLeave(index) {
      const compnt = document.getElementById(`chartMain${this.chartId}`);
      const containers = compnt.getElementsByClassName('content-container');
      const { fillColor } = this.config.config.property.selectedStatusSetting;
      if (!this.selectedStatus || !containers.length || !containers[index]) {
        return;
      }
      if (this.selectedIndex === index) {
        containers[index].style['background'] = fillColor;
      } else {
        containers[index].style['background'] = this.getItemDefaultBackground();
      }
    },

    // 获取卡片的默认背景
    getItemDefaultBackground() {
      const {
        isGradient,
        gradientDirection,
        contentBackgroundColor,
        contentGradientColor,
      } = this.config.config.property;
      let background = '';
      if (isGradient) {
        const direction = gradientDirection === 'vertical' ? '180deg' : '90deg';
        const colors = getThemeColors(contentGradientColor, this.colorGroup[this.componentStyle]);
        background = `linear-gradient(${direction}, ${colors.join()})`;
      } else {
        background = contentBackgroundColor;
      }
      return background;
    },

    // 获取卡片之间分割线
    getSplitLine(units, _typeSetting) {
      // 首先删除分割线，避免重复添加
      const splitLines = units[0]?.parentNode?.getElementsByClassName('split-line');
      while (splitLines && splitLines.length) {
        const element = splitLines[splitLines.length - 1];
        units[0].parentNode.removeChild(element);
      }

      // 分割线只支持横排和竖排
      const { show, color, size } = this.config.config.property.splitLineSetting;
      if (!show || (_typeSetting.alineStyle !== 'column' && _typeSetting.alineStyle !== 'row')) {
        return;
      }
      for (let index = 1; index < units.length; index++) {
        const element = units[index];
        const splitLine = document.createElement('div');
        if (_typeSetting.alineStyle === 'column') {
          splitLine.style = `background-color: ${color}; width: ${element.clientWidth}px; height: ${size}px`;
        } else {
          splitLine.style = `background-color: ${color}; width: ${size}px; height: ${element.clientHeight}px`;
        }
        splitLine.setAttribute('class', 'split-line');
        element.parentNode.insertBefore(splitLine, element);
      }
    },

    // 获取附加值的阈值样式
    getValueAddedThreshold() {
      const { valueAdded } = this.config.config.property;
      const { isThreshold, threshold, thresholdDataType } = valueAdded;
      for (let index = 0; index < this.multiData.length; index++) {
        const data = this.multiData[index];
        data.valueAdded = {};
        if (!isThreshold) {
          continue;
        }
        const extraNumber = this.convertPercentToNumber(data.orgExtra);
        threshold.forEach(item => {
          if (
            data.extra !== null &&
            ((item.field && data.name === item.field) || (!item.field && !threshold.find(n => data.name === n.field))) &&
            ((thresholdDataType === 'number' &&
              this.getValueNum(extraNumber) >= Number(item.min) &&
              this.getValueNum(extraNumber) < Number(item.max)) ||
              (thresholdDataType === 'string' && data.extra !== '' && data.orgExtra === Number(item.text)))
          ) {
            // 改变颜色
            data.valueAdded.style = {
              color: item.color,
            };

            /*
             * 改变图标
             * 该方法在icon-chart-base.js里
             */
            this.updateImgUrlThreshold(data.valueAdded, item);

            // 修改图标大小
            const { fontSize } = this.getCssStyle('extra');
            if (data.valueAdded.icon) {
              Object.assign(data.valueAdded.icon.boxStyle, { width: 16, height: 16 });
              Object.assign(data.valueAdded.icon.imgStyle, { width: 16, height: 16, fontSize: fontSize || 16 });
            }
          }
        });
      }
    },

    convertPercentToNumber(value) {
      if (value === null || value === undefined || value === '') {
        return value;
      }
      let str = value;
      if (typeof value === 'string') {
        str = value.replaceAll(',', '');
      }
      const num = Number(str);
      if (isNaN(num) && str.endsWith('%')) {
        // 非数字,以%结尾的是百分比
        const val = str.slice(0, str.length - 1);
        if (val === '') {
          return val;
        }
        return Number(val) / 100;
      } else {
        // 如果是数字或者非数字不以%结尾直接返回
        return str;
      }
    },

    // 默认选中第一个item并发送事件
    defaultSelectedFirst() {
      const { defaultSelected } = this.config.config.property.selectedStatusSetting;
      if (defaultSelected && this.multiData && this.multiData.length) {
        this.lastSendEvtIndex = -1;
        this.emitAllMessages(this.multiData[0], 0);
        this.getItemStyle(0);
      }
    },
  },
};
</script>
<style lang="less" scoped>
// 图表通用样式，主要有黑色loading 和 黑色 ‘没有数据’，样式名需一致
@import '../../common/chart.less';
</style>
<style lang="less" scoped>
@import './config/theme.less';
@import './index.less'; // 引入新增布局样式

.multi-single-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    width: 100%;
    height: 50px;
    font-size: 18px;
    position: relative;

    span {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 5%;
    }
  }

  .chartMain-main {
    width: 100%;
    height: calc(100% - 50px);
    overflow: scroll;
  }

  .displayBox {
    height: max-content;
    margin: 0 auto;
    flex: 1;
    width: 100%;
    overflow: auto;

    .displayBox-main {
      display: flex;
      min-width: 100%;
      min-height: 100%;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }

    .contentBoxMultiValue_01 {
      width: auto;
    }

    .content-container {
      border-radius: 3px;
      transition: all 0.25s;
      cursor: pointer;

      &.contentData-hover:hover {
        background-color: var(--contentData-hover-bg-color) !important;
      }

      &.on {
        background-color: var(--content-on-bg-color) !important;
      }
    }

    .contentData {
      width: 100%;

      .img {
        display: flex;
        justify-content: center;
        align-items: center;

        .el-image,
        .image-slot {
          width: 60px;
          height: 60px;
          vertical-align: middle;
        }
      }

      .text {
        white-space: nowrap;
        display: flex;
        line-height: 1;

        span {
          display: inline-block;
        }
      }

      .contentName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          display: inline-block;
          width: 100%;
        }

        line-height: 1.5;
      }

      .extraNameIcon {
        display: flex;
        justify-content: center;
        align-items: center;

        .extraIcon {
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        span {
          width: max-content;
        }

        line-height: unset;
      }
    }

    .multi-single-icon-contentBox {
      width: min-content;
      height: max-content;
      display: flex;
    }
  }
}

.contentData {
  display: flex;
  width: auto;
  height: auto;

  .contentData-detail {
    max-width: 100%;
    flex: 1;
  }
}

.displayBox-row {
  flex-direction: row;
}

.displayBox-column {
  flex-direction: column;
}

.displayBox-rect-row {
  flex-direction: row;
  flex-wrap: wrap;
}

.displayBox-rect-column {
  flex-direction: column;
  flex-wrap: wrap;
  height: 100% !important;

  .contentData {
    height: max-content;
  }

  .singleValWithIconUnit-3 {
    .contentData-detail {
      height: auto;
    }
  }
}

.singleValWithIconUnit-0 {
  align-items: center;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    order: 0;
  }

  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;
  }

  .text {
    width: 100%;
    order: 1;
  }

  .contentName {
    width: 100%;
    order: 0;
  }
}

.singleValWithIconUnit-2 {
  flex-wrap: wrap;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    width: 100%;
    order: 0;
  }

  .contentName {
    width: 100%;
    order: 1;
  }
}

.singleValWithIconUnit-3 {
  flex-wrap: wrap;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    order: 0;
  }

  .img {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    width: 100%;
    order: 0;
  }

  .contentName {
    width: 100%;
    order: 1;
  }
}

.singleValWithIconUnit-4 {
  justify-content: center;
  align-items: center;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 2;
    width: 100%;
  }

  .img {
    order: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentName {
    order: 0;
    width: 100%;
  }
}

.singleValWithIconUnit-5 {
  flex-wrap: wrap;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    order: 0;
  }

  .img {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    width: 100%;
    order: 1;
  }

  .contentName {
    width: 100%;
    order: 0;
  }
}

.singleValWithoutIconUnit-0 {
  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 1;
    width: 100%;
  }

  .contentName {
    order: 0;
    width: 100%;
  }
}

.singleValWithoutIconUnit-2 {
  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 0;
    width: 100%;
  }

  .contentName {
    order: 1;
    width: 100%;
  }
}

.singleValWithoutIconUnit-1 {
  .contentData-detail {
    display: flex;
    flex-wrap: nowrap;

    .text {
      order: 3;
    }

    .contentName {
      order: 1;
      margin-right: 11px;
    }

    .extraName {
      order: 2;
    }
  }
}

.singleValWithIconUnit-1 {
  align-items: center;

  .img {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 1;
    width: 100%;
  }

  .contentName {
    order: 0;
    width: 100%;
  }
}

.multiValWithIconUnit-0 {
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;

  .img {
    height: auto;
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }

  .contentData-detail {
    display: flex;
    flex-direction: column-reverse;

    .value {
      flex: none;
    }
  }
}

.multiValWithIconUnit-1 {
  flex-direction: row;

  .img {
    height: auto;
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }

  .contentData-detail {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
  }
}

.multiValWithIconUnit-2 {
  flex-direction: column;

  .contentData-detail {
    text-align: center;
  }

  .img {
    text-align: center;
  }
}

.multiValWithIconUnit-3 {
  flex-direction: column-reverse;

  .img {
    text-align: center;
  }

  .contentData-detail {
    height: max-content;
    flex: none;
  }
}

.multiValWithIconUnit-4 {
  flex-direction: row;

  .contentData-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .img {
    height: auto;
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }
}

.multiValWithIconUnit-5 {
  flex-direction: column-reverse;

  .img {
    text-align: center;
  }

  .contentData-detail {
    height: max-content;
    flex: none;
    display: flex;
    flex-wrap: wrap;
  }

  .contentName {
    order: 1;
    width: 100%;
  }

  .text {
    order: 2;
    width: 100%;
  }

  .extraName {
    order: 3;
    width: 100%;
  }
}

.multiValWithIconUnit-6 {
  flex-wrap: wrap;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    order: 0;
  }

  .img {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    width: 100%;
    order: 1;
  }

  .contentName {
    width: 100%;
    order: 0;
  }

  .extraName {
    order: 3;
    width: 100%;
  }
}

.multiValWithIconUnit-7 {
  flex-wrap: wrap;

  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    order: 0;
  }

  .img {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    width: 100%;
    order: 2;
  }

  .contentName {
    width: 100%;
    order: 0;
  }

  .extraName {
    order: 3;
    width: 100%;
  }
}

.multiValWithoutIconUnit-0 {
  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 2;
    width: 100%;
  }

  .contentName {
    order: 0;
    width: 100%;
  }

  .extraName {
    order: 1;
    width: 100%;
  }
}

.multiValWithoutIconUnit-1 {
  .contentData-detail {
    display: flex;
    flex-wrap: nowrap;
  }

  .text {
    order: 2;
  }

  .contentName {
    order: 0;
    margin-right: 11px;
  }

  .extraName {
    order: 1;
    margin-right: 11px;
  }
}

.multiValWithoutIconUnit-2 {
  .contentData-detail {
    display: flex;
    flex-wrap: wrap;
  }

  .text {
    order: 0;
    width: 100%;
  }

  .contentName {
    order: 2;
    width: 100%;
  }

  .extraName {
    order: 1;
    width: 100%;
  }
}

//自适应
.rowAdjust {
  justify-content: space-around;

  &.displayBox-row {
    min-width: max-content;
  }

  &.displayBox-column {
    align-items: center;
    justify-content: flex-start;

    .multi-single-icon-contentBox {
      height: auto;
    }
  }

  &.displayBox-rect-row {
    align-content: flex-start;
    width: 100% !important;

    .multi-single-icon-contentBox {
      height: max-content;
      width: auto;
      display: flex;
      justify-content: center;

      .contentData {
        width: max-content;

        .contentData-detail {
          flex: 1;
        }
      }
    }
  }

  &.displayBox-rect-column {
    .multi-single-icon-contentBox {
      height: auto;
      width: auto;
      justify-content: center;
    }
  }

  .singleValWithoutIconUnit-1 {
    .contentData-detail {
      flex-wrap: nowrap;
      flex-direction: row;
    }

    .contentName {
      margin-left: 0;
      margin-right: 11px;

      .name {
        width: max-content !important;
      }
    }
  }
}

.columnAdjust {
  align-items: center;
  width: 100% !important;

  &.displayBox-row {
    .multi-single-icon-contentBox {
      width: auto;
    }
  }

  &.displayBox-column {
    justify-content: space-around;
    align-items: flex-start;

    .contentData {
      width: 100%;
    }
  }

  &.displayBox-rect-row {
    align-content: space-around;

    .multi-single-icon-contentBox {
      height: auto;
    }
  }

  &.displayBox-rect-column {
    align-content: flex-start;

    .multi-single-icon-contentBox {
      height: auto;
      width: auto;
      align-items: center;
    }
  }
}

.totalAdjust {
  justify-content: space-around;
  align-items: center;

  .multi-single-icon-contentBox {
    width: 100%;
  }

  &.displayBox-column {
    .contentData {
      width: 100%;
    }
  }

  &.displayBox-rect-row {
    width: 100% !important;
    min-height: max-content;

    .multi-single-icon-contentBox {
      display: flex;
      align-items: center;
      justify-content: center;

      .contentData {
        justify-content: center;
        align-items: center;
        width: auto;

        .contentData-detail {
          flex: 1;
        }
      }
    }
  }

  &.displayBox-rect-column {
    width: 100% !important;

    .multi-single-icon-contentBox {
      display: flex;
      align-items: center;
      justify-content: center;

      .contentData {
        justify-content: center;
        align-items: center;
        width: auto;

        .contentData-detail {
          flex: 1;
        }
      }
    }
  }
}

.nodata {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #515a6e;

  p {
    margin: 0;
  }
}

.light {
  .content-container {
    &.contentData-hover:hover {
      background: #e2effd !important;
    }

    &.on {
      background: #eff5fc !important;
    }
  }
}

</style>
